﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>11120100531-张晶</title>
<style type="text/css">
<!--
.main {
	height: 505px;
	width: 205px;
	margin-top: 100px;
	margin-left: 100px;
	border: 1px solid #ddd;
	font-size: 12px;
}
.main .box ul .last {
	border-bottom-style: none;
}
.main .top ul li {
	list-style-type: none;
	float: left;
	height: 20px;
	width: 45px;
	margin-left: 10px;
	line-height: 20px;
	text-align: center;
	position: relative;
}
.none {
	display: none;
}
.main .box ul li .text {
	line-height: 20px;
	height: 65px;
	width: 110px;
	float: left;
	margin-left: 2px;
}
.main .box ul li .text .red {
	color: #d30012;
	font-weight: bold;
	float: left;
	width: 40px;
}
.main .box ul li .text .price {
	width: 40px;
	float: left;
	color: #a0a0a0;
	font-weight: bold;
	text-decoration: line-through;
}
.top .selected {
	background-color: #bd0703;
	color: #FFF;
	position: relative;
}
.main .top ul .pic {
	background-position: -102px -127px;
	background-image:url(img/spirit.png);
    height: 4px;
    left: 42%;
    position: absolute;
    top: 21px;
    width: 8px;
}
.main .box ul li .text strong {
	height: 40px;
	width: 110px;
	overflow: hidden;
	display: block;
	font-weight: normal;
}
.main .box ul li .img img {
	text-align: center;
	margin-top: 2px;
	margin-left: 3px;
}
.main .top {
	height: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c80300;
	padding-top: 10px;
	margin-bottom: 15px;
}
* {
	margin: 0px;
	padding: 0px;
}
.main .title {
	height: 30px;
	border-bottom-color: #ddd;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	line-height: 30px;
	font-weight: bold;
	padding-left: 10px;
}
.main .box ul li {
	list-style-type: none;
	height: 75px;
	width: 180px;
	margin-right: 10px;
	margin-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ddd;
	margin-top: 10px;
}
.main .box ul li .img .pic1 {
	background-position: 0 -109px;
	background-image:url(img/spirit.png);
    color: #FFFFFF;
    font: bold 10px Tahoma;
    height: 20px;
    left: 0;
    padding-left: 2px;
    position: absolute;
    top: 0;
    width: 18px;
}
.main .box ul li .img .pic2 {
	background-position: 0 -132px;
	background-image:url(img/spirit.png);
    color: #FFFFFF;
    font: bold 10px Tahoma;
    height: 20px;
    left: 0;
    padding-left: 2px;
    position: absolute;
    top: 0;
    width: 18px;
}
.main .box ul li .img {
	position: relative;
	height: 65px;
	width: 65px;
	float: left;
	border: 1px solid #f2f2f2;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script>
$(function(){
    $("li").mousemove(function(){
        var index=$("li").index(this);
          $(".box").eq(index).show().siblings(".box").hide();  //eq是等于的意思 第几个.box显示 其余隐藏
          $(this).addClass("cur").siblings().removeClass("cur");
		  $(".box").hide().eq(index).show();
          $("li").removeClass("cur").eq(index).addClass("cur");
    })

});
</script>
</head>
<body>
<div class="main">
<div class="title">热销排行榜</div>
<div class="top">
<ul>
<li class="selected">同分类<div class="pic"></div></li>
<li>同品牌<div class="pic none"></div></li>
<li>同价位<div class="pic none"></div></li>
</ul>
</div>
<div class="box">
<ul>
<li>
<div class="img"><div class="pic1">1</div><img src="img/1-1.jpg" /></div>
<div class="text"><strong>ZTE 中兴 U960s3 3G手机（黑色）TD-SCDMA</strong>
<span class="red">￥799</span><div class="price">￥1499</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">2</div><img src="img/1-2.jpg" /></div>
<div class="text"><strong>ZTE 中兴 U880E 3G（GSM/TD-SCDMA）</strong>
<span class="red">￥629</span><div class="price">￥1299</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">3</div><img src="img/1-3.jpg" /></div>
<div class="text"><strong>Lenovo 联想 A698t 3G手机（深邃黑）</strong>
<span class="red">￥658</span><div class="price">￥1399</div>
</div>
</li>
<li>
<div class="img"><div class="pic2">4</div><img src="img/1-4.jpg" /></div>
<div class="text"><strong>Lenovo 联想 A66t 3G智能手机</strong>
<span class="red">￥468</span><div class="price">￥999</div>
</div>
</li>
<li class="last">
<div class="img"><div class="pic2">5</div><img src="img/1-5.jpg" /></div>
<div class="text"><strong>Motorola 摩托罗拉MT917 3G手机 黑色</strong>
<span class="red">￥1758</span><div class="price">￥2699</div>
</div>
</li>
</ul>
</div>

<div class="box none">
<ul>
<li>
<div class="img"><div class="pic1">1</div><img src="img/2-1.jpg" /></div>
<div class="text"><strong>ZTE 中兴 U930 3G手机（白色）TD-SCDMA</strong>
<span class="red">￥888</span><div class="price">￥1499</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">2</div><img src="img/2-2.jpg" /></div>
<div class="text"><strong>ZTE 中兴 U880E 3G（GSM/TD-SCDMA）</strong>
<span class="red">￥629</span><div class="price">￥1299</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">3</div><img src="img/2-3.jpg" /></div>
<div class="text"><strong>引领3G生活！移动用户Android Fans必备</strong>
<span class="red">￥599</span><div class="price">￥1499</div>
</div>
</li>
<li>
<div class="img"><div class="pic2">4</div><img src="img/2-4.jpg" /></div>
<div class="text"><strong>中兴 ZTE Aglaia V881 3G手机（白色）</strong>
<span class="red">￥599</span><div class="price">￥1499</div>
</div>
</li>
<li class="last">
<div class="img"><div class="pic2">5</div><img src="img/2-5.jpg" /></div>
<div class="text"><strong>ZTE 中兴 V955 3G手机（深蓝色）联通定制版</strong>
<span class="red">￥848</span><div class="price">￥1599</div>
</div>
</li>
</ul>
</div>


<div class="box none">
<ul>
<li>
<div class="img"><div class="pic1">1</div><img src="img/3-1.jpg" /></div>
<div class="text"><strong>引领3G生活！移动用户Android Fans必备</strong>
<span class="red">￥599</span><div class="price">￥1499</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">2</div><img src="img/3-2.jpg" /></div>
<div class="text"><strong>Samaung 三星 S6352 双卡双待3G智能手机</strong>
<span class="red">￥849</span><div class="price">￥1898</div>
</div>
</li>
<li>
<div class="img"><div class="pic1">3</div><img src="img/3-3.jpg" /></div>
<div class="text"><strong>ZTE 中兴 V955 3G手机（深蓝色）联通定制版</strong>
<span class="red">￥848</span><div class="price">￥1599</div>
</div>
</li>
<li>
<div class="img"><div class="pic2">4</div><img src="img/3-4.jpg" /></div>
<div class="text"><strong>Samaung 三星 S5830i 3G智能手机</strong>
<span class="red">￥998</span><div class="price">￥1398</div>
</div>
</li>
<li class="last">
<div class="img"><div class="pic2">5</div><img src="img/3-5.jpg" /></div>
<div class="text"><strong>Motorola 摩托罗拉 XT615 黑色智能3G手机</strong>
<span class="red">￥968</span><div class="price">￥2898</div>
</div>
</li>
</ul>
</div>

</div>
</body>
</html>
